/** @type {HTMLCanvasElement} */
const canvas4 = document.getElementById('canvas4');
const ctx4 = canvas4.getContext('2d');


CANVAS_HEIGHT4 = canvas4.height = 800;
CANVAS_WIDTH4 = canvas4.width = 400;

const numberOfEnmies4 = 50;

let gameFrame4 = 0;
const enemiesArray4 = [];

class Enemy4 {
    constructor() {

        this.speed = Math.random() * 4 + 1;
        const image = new Image();
        image.src = './enemy4.png';
        this.image = image;

        this.spriteWidth = 213;
        this.spriteHeight = 212;
        this.width = this.spriteWidth /2.5;
        this.height = this.spriteHeight / 2.5;
        this.x = Math.random() * (canvas4.width - this.width);
        this.y = Math.random() * (canvas4.height - this.height);
        this.newX = Math.random() * (canvas4.width - this.width);
        this.newY = Math.random() * (canvas4.height - this.height);
        this.frame = 0;
        this.flapSeed = Math.floor(Math.random() * 4 + 1);
        this.angle = Math.random()*500;
        this.angleSpeed = Math.random()*0.2+0.5;
        this.curve = Math.random()*200 + 50;
        this.interval = Math.floor(Math.random()*200+50);
    }
    update() {
        if(gameFrame4%this.interval===0){
            this.newX = Math.random() * (canvas4.width - this.width);
            this.newY = Math.random() * (canvas4.height - this.height);
        }
        let dx = this.x-this.newX;
        let dy = this.y - this.newY;
        this.x -= dx/70;
        this.y -= dy/70;

        if (gameFrame4 % this.flapSeed === 0) {
            this.frame > 4 ? this.frame = 0 : this.frame++;
        }
    }
    draw() {
        ctx4.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
    }
}

for (let i = 0; i < numberOfEnmies4; i++) {
    enemiesArray4.push(new Enemy4())
}


function animate4() {
    ctx4.clearRect(0, 0, CANVAS_WIDTH4, CANVAS_HEIGHT4);
    enemiesArray4.forEach(enemy => {
        enemy.update();
        enemy.draw();
    });
    gameFrame4++;
    requestAnimationFrame(animate4)
}

animate4();